Kamwoo blog

narrowing: type guard 나 할당된 것을 보고 선언된거 보다 더욱 구체적인 타입으로 축소하는 것

여러가지 타입이 들어올 수 있을 때 예를 들어 항상 null 값이 아니라는 보장이 없을 때, 생각하는 타입이 아닐 때 를 고려하고 예외처리해서 에러없이 사용할 수 있다.

typeof

해당하는 객체가 원시값의 타입을 가질 때 사용할 수 있다.

typeof foo === ‘string’

instanceof

클래스를 비교할 수 있을 때

1class Foo {}
2
3if (x instanceof Foo){}

interface, type alias로 비교를 해야될 때

1interface User {
2    name: string;
3    age: number;
4    occupation: string;
5}
6
7function check(person: User | Admin){
8	if ('occupation' in person){}
9}

객체 리터럴

1type TriState = 'yes' | 'no' | 'unknown';
2
3function logOutState(state:TriState) {
4  if (state == 'yes') {
5  console.log('사용자가 yes를 골랐습니다');
6  } else if (state == 'no') {
7  console.log('사용자가 no를 골랐습니다');
8  } else {
9  console.log('사용자가 아직 결정을 내리지 않았습니다.');
10  }
11}

null, undefined

1function foo(a?: number | null){
2	if (a !== null) return
3}

type alias

1/**
2 * 일반적인 인터페이스 예
3 */
4interface Foo {
5  foo: number;
6  common: string;
7}
8
9interface Bar {
10  bar: number;
11  common: string;
12}
13
14/**
15 * 사용자 정의 Type Guard!
16 */
17function isFoo(arg: any): arg is Foo {
18  return arg.foo !== undefined;
19}
20
21/**
22 * 사용자 정의 Type Guard 사용 예시
23 */
24function doStuff(arg: Foo | Bar) {
25  if (isFoo(arg)) {
26    console.log(arg.foo); // ㅇㅋ
27    console.log(arg.bar); // Error!
28  }
29  else {
30    console.log(arg.foo); // Error!
31    console.log(arg.bar); // ㅇㅋ
32  }
33}
34
35doStuff({ foo: 123, common: '123' });
36doStuff({ bar: 123, common: '123' });

리턴값을 명시해주지 않았을 때 true, false의 타입을 string으로 좁혀서 if에서 안먹힌다.

callback

타입 스크립트는 콜백 함수 내에서 type guard가 계속 유효하다고 여기지 않는다.

예를들어 옵셔널로 되어있는 변수는 한번 로컬 변수로 선언해서 타입을 추론할 수 있게 만들고 콜백에 전달한다.

1function isString(test: any): test is string{
2    return typeof test === "string";
3}

리턴 되는 값이 true라면 test를 string으로 타입을 좁힌다.

Type guard